<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>common 组件示例</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/layer.css"/>
	</head>
	<body>
		<h2>下拉选择框</h2>
		<div class="select" data-role="select">
			<input type="text" name="demo_select" id="demo_select" readonly/>
			<input type="hidden" name="demo_select_val" id="demo_select_val"/>
			<i><span class="iconfont icon-xia"></span></i>
			<ul>
				<li data-val="0">全部选择</li>
				<li data-val="1" data-selected="selected">选项1</li>
				<li data-val="2">选项2</li>
				<li data-val="3">选项3</li>
				<li data-val="4">选项4</li>
				<li data-val="5">选项5</li>
			</ul>
		</div>
		
		<!------------------------- 切换性别 start -------------------------->
		<h2>切换性别</h2>
        <div class="switch_sex clearfix">
            <div class="man show fl"><i class="iconfont icon-nan"></i>男</div>           
            <div class="woman fl"><i class="iconfont icon-iconfontnv"></i>女</div>
            <i class="iconfont icon-iconfontshuaxin fr"></i>
        </div>
        <!------------------------- 切换性别  end -------------------------->
		
		<h2>弹出层</h2>
		<a href="" data-ent="dialogs_1">打开对话框1</a><br />
		<a href="" data-ent="dialogs_2">打开对话框2</a><br />
		<a href="" data-ent="dialogs_3">打开对话框3</a><br />
		<a href="" data-ent="dialogs_4">打开对话框4</a>
		
		<!--
			【弹出层组件】
			
			功能介绍：
			在需要调用弹出层的元素添加 data-ent 属性即可调出该属性值对应ID 的对话框。
			弹出层宽度和高度都是自适应的，依靠内容自撑大小，最大宽度与高度匀为浏览器可视宽高。
			
			运行环境：
			1. 载入 JQuery库；
			2. 载入 layer.js；
			3. 载入 layer.css
			
			组件操作：
			<* data-ent="id"></*>			//弹出层入口
			<* data-action="close"></*>		//关闭弹出层
		-->
		<!------------------------- 弹出层 start -------------------------->
		<div class="layer">
			
			<!------------------------- 对话框1 start -------------------------->
			<div id="dialogs_1" class="dialogs">
				
				<!-- 关闭按钮 -->
				<i class="close" data-action="close">
					<span class="iconfont icon-close"></span>
				</i>
				
				<!-- 对话框标题 -->
				<div class="caption">对话框1</div>
				
				<div class="content">
					
					<!-- 对话框内容 start -->
					<div style="width: 600px;">123</div>
					123456 <br />
					123456 <br />
					123456 <br />
					123456 <br />
					123456 <br />
					123456 <br />
					123456 <br />
					123456 <br />
					123456 <br />
					<!-- 对话框内容 end -->
					
				</div>
				
				<!-- 组件操作 -->
				<div class="actions">
					<!-- 按钮 -->
					<a class="btn btn_160" href="" data-action="close">确定</a>
					
					<!-- 复选框 -->
					<input type="checkbox" name="demo" id="demo"/>
					<label for="demo">
						<i class="iconfont icon-xuanze"></i>
						<span>文本信息</span>
					</label>
				</div>
			</div>
			<!------------------------- 对话框1 end -------------------------->
			
			<!------------------------- 对话框2 start -------------------------->
			<div id="dialogs_2" class="dialogs">
				<i class="close" data-action="close">
					<span class="iconfont icon-close"></span>
				</i>
				<div class="caption">对话框2</div>
				<div class="content">
					<p>mysql_install_db脚本只是在初次安装时才需要运行一次,之后就不用再运行了</p>
				</div>
				<div class="actions">
					<a class="btn btn_160" href="" data-action="close">确定</a>
				</div>
			</div>
			<!------------------------- 对话框2 end -------------------------->
			
			<!------------------------- 对话框3 start -------------------------->
			<div id="dialogs_3" class="dialogs">
				<i class="close" data-action="close">
					<span class="iconfont icon-close"></span>
				</i>
				<div class="caption">对话框3</div>
				<div class="content">
					<p>mysql_install_db脚本只是在初次安装时才需要运行一次,之后就不用再运行了</p>
				</div>
				<div class="actions">
					<a class="btn btn_160" href="" data-action="close">确定</a>
					<a class="btn btn_white btn_160" href="" data-action="close">取消</a>
				</div>
			</div>
			<!------------------------- 对话框3 end -------------------------->
			
			<!------------------------- 对话框4 start -------------------------->
			<div id="dialogs_4" class="dialogs">
				<i class="close" data-action="close">
					<span class="iconfont icon-close"></span>
				</i>
				<div class="content">
					<p>545545345</p>
				</div>
				<div class="actions">
					<a class="btn btn_160" href="" data-action="close">确定</a>
				</div>
			</div>
			<!------------------------- 对话框4 end -------------------------->
			
		</div>
		<!------------------------- 弹出层 end -------------------------->
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/select.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layer.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
